<!--组件-开关-->
<template>
  <div class="row acenter">
    <text class="font28 text2" :style="{'max-width':maxWidth+'px'}">{{title}}</text>
    <LImage class="explain" v-if="explain && explain.length" :src="Config.img('wenhao.png')" @click="explainClick"></LImage>
    <div class="all"></div>
    <Switc class="switc" ref='switc' :isOn="isOn" :isEdit="isEdit" @switcClick="switcClick"></Switc>
  </div>
</template>

<script>

import modal from '@/_js/modal';
import Config from "@/_js/config";

export default {

  model:{
    prop:"isOn",
    event:"change",
  },


  props:{

    isOn:{ //true选中
      type:Boolean,
      default:true,
    },

    isEdit:{ //true可编辑
      type:Boolean,
      default:true,
    },
  
    title:{ //标题
      type:String,
      default:'',
    },

    explain: { //说明
      type:String,
      default:undefined,
    },

    maxWidth:{
      type:Number,
      default:500,
    },
  },
  
  data() {
    return {
      Config:Config,
      
    };
  },

  mounted(){
  },

  methods:{

    /********************************************** 点击触发*/
    //开关点击
    switcClick(e){
      this.$emit("change", e.isOn);
    },
    
    //说明点击
    explainClick(){
      var parm = {'message':this.explain};
      modal.alert(parm,(bool)=>{
        navigator.back();
      });
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.explain {
  width: 28px;
  height: 28px;

  margin-left: 8px;
}
.switc{
  width: 100px;
  height: 60px;
  margin-left: 40px;
}
</style>
